<template>
  <div class="commentContainer">
    <h3>评论列表</h3>
    <ul v-if="comments.length > 0">
      <li v-for="(comment, index) in comments" :key="index">
        <span class="commenter">{{ comment.commenter }}：</span>
        <span class="content">{{ comment.content }}</span>
      </li>
    </ul>
    <p v-else>暂无评论</p>

    <ChildComment @addComment="handleAddComment"></ChildComment>
  </div>
</template>

<script>
import ChildComment from "./components/ChildComment.vue";

export default {
  components: {
    ChildComment,
  },
  data() {
    return {
      comments: [],
    };
  },
  methods: {
    handleAddComment(comment) {
      this.comments.push(comment);
    },
  },
};
</script>

<style scoped>
.commentContainer {
  width: 600px;
  margin: 0 auto;
  padding: 15px;
}
ul {
  padding: 0;
}
li {
  list-style: none;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
</style>